<template>
	<view>
		<view class="item">
			<!-- <text class="item-text">输入银行预留手机号</text> -->
			<view class="item-content">
				<text>卡类型</text>
				<!-- <input type="text" placeholder="请输入" /> -->
				<picker @change="selectType" range-key="type_name" :range="bankType" :value="index">
					<input type="text" disabled="" v-model="type_name" placeholder="请选择" />
				</picker>
			</view>
			<view class="item-content">
				<text>手机号</text>
				<input type="text" v-model="mobile" placeholder="输入银行预留手机号" />
			</view>
		</view>
		<view class="next" @click="Next">
			下一步
		</view>
		<view class="developing" v-if="developing">
			正在开发当中，请尽情期待... ...
		</view>
		<view class="closeIntegral" @click="closeIntegral()" v-if="developing">确定</view>
		<view>
			<view></view>
		</view>
		<view class="bottom-tip">
			<!-- <view>
				<checkbox-group @change="checkboxChange">
					<checkbox value="cb" class="checkbox" :checked="state" />
				</checkbox-group>
			</view> -->
			<!-- <view>
				同意
			</view>
			<view class="tip-title">《用户协议》</view> -->
			<view class="msgagreement" v-html="msgagreem">
			</view>
		</view>
		<view class="inputCode" v-if="inputCode">
			<view class="head">
				绑定银行卡需要短信确认，验证码已发送至手机:{{mobile}}，请按提示操作。
			</view>
			<view class="code">
				<text>验证码:</text>
				<input class="" type="number" v-model="code" placeholder="输入验证码" />
				<button class="get-code-btn" type="default" @click="sendCode">{{ send_btn_txt }}</button>

			</view>
			<view class="next" @click="nextTow">
				下一步
			</view>
		</view>
		<view class="complete" v-if="complete">
			<view class="head">
				<image class="head-img" src="../../../../static/complete.png"></image>
				<view>银行卡添加成功</view>
			</view>
			<view class="next" @click="Complete">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				send_btn_txt: '获取验证码',
				inputCode: false,
				complete: false,
				second: 60,
				code: '',
				/*是否已发验证码*/
				is_send: false,
				state: false,
				bankName: '',
				bankCode: '',
				bankType: [],
				type_name: '',
				type_id: '',
				index: 0,
				msgagreem:'',//用户协议
				msg:true,
				developing:false,
				timer:null,
				// selectType:[
				// 	{
				// 		typeName:'中国工商银行',
				// 		index:1
				// 	},
				// 	{
				// 		typeName:'中国农业银行',
				// 		index:2
				// 	},
				// 	{
				// 		typeName:'中国邮政储蓄银行',
				// 		index:1
				// 	},
				// 	{
				// 		typeName:'建设银行',
				// 		index:1
				// 	},
				// 	{
				// 		typeName:'中国工商银行',
				// 		index:1
				// 	},
				// ],
			};
		},
		onLoad(e) {
			if (e.select == 1) {
				this.bankName = JSON.parse(e.bank).bankName;
				this.bankCode = JSON.parse(e.bank).bankCode;
			}
			this.getBankType();
			this.getmAgreement();
		},
		methods: {
			/* 关闭积分福利内容 */
			closeIntegral() {
				this.developing = false
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
			/* 积分福利内容 */
			// showIntegral() {
			// 	this.developing = true;
			// 	this.timer = setTimeout(() => {
			// 		this.developing = false
			// 	}, 3000);
			// },
			/*卡类型选择 */
			selectType: function(e) {
				console.log(e);
				let driverId = e.detail.value;
				let type = this.bankType[driverId];
				this.type_name = type.type_name;
				this.type_id = type.id;//卡类型id
				console.log(this.type_id)
			},
			/* 获取协议*/
			getmAgreement() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus.article.article/detail', 
				{
					article_id:10011
				},
				 function(res) {
					console.log(res);
					//self.msgagreem = res.data.detail.article_content;
					uni.hideLoading();
				});
			},
			
			/* 获取类型 */
			getBankType() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('home/bank_type', {}, function(res) {
					console.log(res);
					self.bankType = res.data.type_list;
					uni.hideLoading();
				});
			},
			checkboxChange(e) {
				this.state = !this.state;
			},
			Complete() {
				let self = this;
				let formData = {};
				formData.bankName = self.bankName,
					formData.bankCode = self.bankCode,
					formData.bankPhone = self.mobile;
					formData.type_id = self.type_id;
				self.complete = false;
				uni.showLoading({
					title: '正在提交',
				});
				self._post(
					'user.add/add_bank',
					formData,
					result => {
						console.log(result.code);
						if (result.code == 1) {
							uni.showToast({
								title: '添加成功！',
								duration: 2000,
								icon: 'none'
							});
							self.gotoPage('/pages/user/my-account/bank-card/bank-card');
						}
					},
					false,
					() => {
						uni.hideLoading();
					}
				)
			},
			Next() {
				let self = this;
				self.developing = true;
				self.timer = setTimeout(() => {
					self.developing = false
				}, 3000);
				console.log(self.mobile);
				// if (self.type_name == false) {
				// 	uni.showToast({
				// 		title: '请选择卡类型！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.mobile)) {
				// 	uni.showToast({
				// 		title: '手机有误,请重填！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (self.state == false) {
				// 	uni.showToast({
				// 		title: '请勾选用户协议！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// //this.Complete();
				// self.inputCode = true
			},
			nextTow() {
				let self = this;
				if (self.code == '') {
					uni.showToast({
						title: '验证码不能为空！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				self.inputCode = false;
				self.complete = true;
			},
			/*发送短信*/
			sendCode() {
				let self = this;

				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.mobile)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				self._post(
					'user.userweb/sendCode', {
						mobile: self.mobile
					},
					result => {
						if (result.code == 1) {
							uni.showToast({
								title: '发送成功'
							});
							self.is_send = true;
							self.changeMsg();
						}
					}
				);
			},

			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.complete {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		z-index: 99;

		.head {
			width: 100%;
			margin-top: 360rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.head-img {
				width: 160rpx;
				height: 130rpx;
				margin-bottom: 40rpx;
			}
		}
	}

	.inputCode {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;

		.head {
			width: 73%;
			margin-left: 5%;
			color: #7a7a7a;
		}
	}

	.code {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F4F4F4;
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		margin: 40rpx auto 40rpx;
	}

	.code text {
		font-size: 40rpx;
		margin-right: 40rpx;
	}

	.code text {
		line-height: 0;
	}

	.code input {
		width: 300rpx;
	}

	.get-code-btn {
		background-color: #FFFFFF;
		color: #007AFF;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.item-text {
		color: #7a7a7a;
		font-size: 30rpx;
	}

	.item-content {
		height: 120rpx;
		border-bottom: 2rpx solid #F4F4F4;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-content text {
		font-size: 36rpx;
		margin-right: 40rpx;
	}

	.next {

		width: 90%;
		height: 80rpx;
		margin: 120rpx auto 40rpx;
		line-height: 80rpx;
		background-color: rgba(88, 100, 253, 1);
		border-radius: 8rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.bottom-tip {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: 5%;
	}

	.tip-title {
		color: $dominant-color;
	}
	.msgagreement{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		//height: 100%;
		text-align: center;
		background-color: #aeffa5;
		color: #000000;
	}
	.developing{
		width: 96%;
		height: 100%;
		line-height: 600rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		left: 2%;
		text-align: center;
		font-size: 30rpx;
		border-radius: 20rpx;
		opacity: 0.9;
	}
	.closeIntegral{
		clear: both;
		width: 200rpx;
		height: 60rpx;
		background-color: #0368FF;
		position: fixed;
		bottom: 20%;
		left: 50%;
		margin-left: -100rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		z-index: 66;
	}
</style>
